<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2022-06-28 15:23:55
 * @LastEditors: zzb
 * @LastEditTime: 2023-08-08 16:54:36
-->
<template>
  <el-tabs type="border-card" class="tab-container" v-model="activeName">
    <el-tab-pane label="图片库" name="picture" lazy v-if="false">
      <Picture :siteList="siteList"></Picture>
    </el-tab-pane>
    <el-tab-pane label="文件库" name="files" lazy>
      <Files :siteList="siteList"></Files>
    </el-tab-pane>
    <el-tab-pane label="视频库" name="video" lazy v-if="false">
      视频库</el-tab-pane
    >
    <el-tab-pane label="水印管理" name="waterMark" lazy>
      <WaterMark :siteList="siteList"></WaterMark>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Picture from "./components/picture.vue";
import Files from "./components/files.vue";
import WaterMark from "./components/waterMark.vue";
import { listSite } from "@/api/content/net";
export default {
  name: "Name",

  data() {
    return {
      // 当前tab
      activeName: "files",
      //站点列表
      siteList: [],
    };
  },

  components: { Picture, WaterMark, Files },

  computed: {},

  mounted() {
    this.getSiteList();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    //获取站点列表
    getSiteList() {
      listSite().then((res) => {
        // res.data.unshift({ siteId: 1, name: "平台系统" });
        this.siteList = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
.tab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  ::v-deep {
    .el-tabs__content {
      height: calc(100% - 40px);
      flex: 1;
      overflow: auto;
      .el-tab-pane {
        height: 100%;
        .channel-item {
          height: 100%;
          .share-row {
            padding-bottom: 10px;
          }
          .editor-plus-form {
            height: 100%;
            display: flex;
            flex-direction: column;

            .edit-row {
              flex: 1;
              overflow: hidden;
              .codeEditor {
                height: 100%;
                .el-form-item__content {
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
